/**
        undefined is not an object (evaluating ‘RNGestureHandlerModule.State’
        React Navigation 报错解决办法
        解决办法：
        步骤如下：
        remove node_modules and package-lock.json
        npm install
        npm install --save react-navigation
        npm install --save react-native-gesture-handler
        react-native link
 *
 */
import React, {PureComponent} from 'react';
import {Image} from "react-native";
import {createAppContainer,createStackNavigator,createBottomTabNavigator} from 'react-navigation';
import Home from './home/Home';
import Enterprise from './enterprise/Enterprise'
import Mine from "./mine/Mine";
import ShoppingCart from "./shoppingCart/ShoppingCart";
import Login from "./login/Login";
import Register from "./login/Register";

const RootTabss = createBottomTabNavigator({
    Home:{
        screen:Home,
        navigationOptions: (navigation) => ({
            tabBarLabel: "首页",
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Image
                    style={{width:30,height:30}}
                    source={
                        focused
                            ? require("../assets/home_active.png")
                            : require("../assets/home.png")
                    }
                />
            ),

        }),
    },
    Enterprise:{
        screen:Enterprise,
        navigationOptions: (navigation) => ({
            tabBarLabel: "企业",
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Image
                    style={{width:30,height:30}}
                    source={
                        focused
                            ? require("../assets/enterprise_active.png")
                            : require("../assets/enterprise.png")
                    }
                />
            ),
        }),
    },
    Cart:{
        screen:ShoppingCart,
        navigationOptions: (navigation) => ({
            tabBarLabel: "购物车",
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Image
                    style={{width:30,height:30}}
                    source={
                        focused
                            ? require("../assets/cart_active.png")
                            : require("../assets/cart.png")
                    }
                />
            ),

        }),
    },
    Mine:{
        screen:Mine,
        navigationOptions: (navigation) => ({
            tabBarLabel: "我的",
            tabBarIcon: ({focused, horizontal, tintColor}) => (
                <Image
                    style={{width:30,height:30}}
                    source={
                        focused
                            ? require("../assets/mine_active.png")
                            : require("../assets/mine.png")
                    }
                />
            ),

        }),
    }
},
{
    initialRouteName: 'Home',
    tabBarOptions: {
        activeTintColor: "#1296db", //活动选项卡的标签和图标颜色
        inactiveTintColor: "#333333",//inactiveTintColor
        allowFontScaling: true, //标签字体是否应缩放以符合“文本大小”辅助功能设置，默认为true。
        showLabel: true,// - 是否为标签显示标签，默认为true。
        showIcon: true,//- 是否显示选项卡的图标，默认为true。
    }
})
const RootTabs = createAppContainer(RootTabss);

const Navigators = createStackNavigator(
    {
        RootTabs:{
            screen:RootTabs,
            //4. 添加标题
            navigationOptions: {
                header: () => null, 
            }
        },
        Login:{
            screen:Login,
            navigationOptions:{
                headerTitle:'登录',
            },
        }
    },
    {
        initialRouteName: 'RootTabs',
        headerMode: 'screen'
    }
);
const RootNavigator = createAppContainer(Navigators)
export default RootNavigator;
